<template>
  <div class="dialog-form">
    <el-form ref="companyRef" :model="form" :rules="rules" label-width="110px">
      <el-row :gutter="36">
        <el-col :span="12">
          <el-form-item label="所属公司" prop="companyId">
            <el-select v-model="form.companyId" placeholder="请选择所属公司" clearable>
              <el-option
                v-for="obj in list"
                :key="obj.id"
                :label="obj.name"
                :value="obj.id"
                :disabled="obj.state == 2"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分公司名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入公司名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分公司负责人" prop="head">
            <el-input v-model="form.head" placeholder="请输入公司负责人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主营业务" prop="mainBusiness">
            <el-input v-model="form.mainBusiness" placeholder="请输入主营业务" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款帐号" prop="receivingAccount">
            <el-input v-model="form.receivingAccount" placeholder="请输入收款帐号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在城市" prop="cityValue">
            <el-select v-model="form.cityValue" placeholder="请选择所在城市" clearable>
              <el-option
                v-for="obj in company_city_area"
                :key="obj.value"
                :label="obj.label"
                :value="obj.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分公司地址" prop="address">
            <el-input v-model="form.address" placeholder="请输入公司地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入联系电话" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入联系邮箱" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分公司状态" prop="state">
            <el-radio-group v-model="form.state">
              <el-radio
                v-for="dict in sys_company_status"
                :key="dict.value"
                :value="dict.value"
              >{{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="分公司简介" prop="profile">
            <el-input v-model="form.profile" type="textarea" placeholder="请输入分公司简介，不超过100个字" :rows="3" :maxlength="100" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
  </div>
</template>

<script setup>
import { getCompany, addCompany, updateCompany } from "@/api/company/company"
import { validEmail } from '@/utils/validate'
const { proxy } = getCurrentInstance()
const { sys_company_status, company_city_area } = proxy.useDict("sys_company_status", 'company_city_area')

const companyRef = ref()
const props = defineProps(['list'])
const emits = defineEmits(['cancel', 'confirm'])

const form = ref({
  id: null,
  name: null,
  head: null,
  mainBusiness: null,
  receivingAccount: null,
  cityValue: null,
  address: null,
  phone: null,
  email: null,
  state: '1',                   // 1启用  2禁用
  profile: null,
  companyId: null,
})

const checkEmail = (rule, value, callback) => {
  if (value && !validEmail(value)) {
    callback(new Error('联系邮箱格式不正确'))
  } else {
    callback()
  }
}
const rules = {
  companyId: [{ required: true, message: "请选择所属公司", trigger: "blur" }],
  name: [{ required: true, message: "公司名称不能为空", trigger: "blur" }],
  head: [{ required: true, message: "公司负责人不能为空", trigger: "blur" }],
  mainBusiness: [{ required: true, message: "主营业务不能为空", trigger: "blur" }],
  cityValue: [{ required: true, message: "所在城市不能为空", trigger: "blur" }],
  address: [{ required: true, message: "公司地址不能为空", trigger: "blur" }],
  phone: [
    { required: true, message: "联系电话不能为空", trigger: "blur" },
    { pattern: /^1[3456789]\d{9}$|^((\d{3,4}-)?\d{7,8})$/, message: "联系电话格式不正确", trigger: "blur" }
  ],
  email: [{ required: false, validator: checkEmail, trigger: "blur" }],
  state: [{ required: true, message: "请选择公司状态", trigger: "blur" }],
}

const pageInit = (id) => {
  if (id) {
    getCompany(id).then(response => {
      form.value = response.data
      form.value.id = id
      form.value.state = form.value.state.toString()
    })
  }
}

const onCancel = () => {
  emits('cancel')
}

const onConfirm = () => {
  companyRef.value.validate(valid => {
    if (valid) {
      if (form.value.id) {
        updateCompany(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          companyRef.value.resetFields()
          emits('confirm')
        });
      } else {
        addCompany(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          companyRef.value.resetFields()
          emits('confirm')
        })
      }
    }
  })
}

defineExpose({
  pageInit
})

</script>

<style lang="scss" scoped>

</style>